<template>
	<view class="history">
		<view class="list" v-if="dataList.length">
			<view class="item" v-for="(item,index) in 6" :key="index">
				<view class="item-t flex-j-sb flex-a-c">
					<text class="tit">减肥惹05</text>
				</view>
				<view class="item-m flex-j-sb">
					<view class="item-m-i">
						<view class="item-m-i-row">
							<text class="txt">交易时间</text>
							<text>10:30:20</text>
						</view>
						<view class="item-m-i-row">
							<text class="txt">持仓数量</text>
							<text>50</text>
						</view>
						<view class="item-m-i-row">
							<text class="txt">持仓价格</text>
							<text>28.20</text>
						</view>
					</view>
					<view class="item-m-i">
						<view class="item-m-i-row">
							<text class="txt">类型</text>
							<text class="status">卖出</text>
						</view>
						<view class="item-m-i-row">
							<text class="txt">冻结数量</text>
							<text>0</text>
						</view>
						<view class="item-m-i-row">
							<text class="txt">持仓金额</text>
							<text class="red">1950.00</text>
						</view>
					</view>
				</view>
				<view class="item-b flex-j-fe">
					<view class="btn" @tap="goExchange(0)">转让</view>
				</view>
			</view>
		</view>
		<view class="none" v-else>暂无数据</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[],
				chicangDetail:'', // 持仓明细
			}
		},
		onLoad(e) {
			let title = ''
			if(e.chicangDetail){ // 持仓明细
				this.chicangDetail = true
				title = '订单明细'
			}
			uni.setNavigationBarTitle({
				title
			})
		},
		onReachBottom() {
			console.log(11111);
		},
		methods:{
			goExchange(num){
				let url = '../possess/makeOver'
				if(num === 0) url += '?transfer=true' // 转让
				uni.navigateTo({
					url
				})
			},
			changeTabs(e){
				this.tabIndex = e.index
				e.index? this.navRightText = '':this.navRightText = '明细'
			},
			navRightClick(){
				if(this.tabIndex !== 0) return
				console.log(2222);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		font-size: 26rpx;
		padding: 20rpx;
		.item {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 5px;
			background-color: white;
			.item-t {
				.tit {
					font-weight: bold;
					font-weight: 30rpx;
				}
			}
			.item-m {
				margin: 20rpx 0px;
				.item-m-i {
					width: 45%;
					.item-m-i-row {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 5rpx;
						
					}
				}
			}
			.item-b {
				padding: 0px 10rpx;
				.btn {
					width: 150rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 30rpx;
					text-align: center;
					border: 1rpx solid #ddd;
					+.btn {
						margin-left: 30rpx;
					}
				}
			}
		}
		.status {
			color: #1AA034;
		}
		.txt {
			color: gray;
		}
		.red {
			color: #E20000;
		}
	}
	
	.none {
		font-size: 30rpx;
		margin-top: 100rpx;
		text-align: center;
	}
</style>